<template>
  <div class="myself" route>
    <!-- 未登录头部 -->
    <div class="header" v-if="!user">
      <div class="header-bg">
        <img src="http://liufusong.top:8080/img/profile/bg.png" alt="" />
      </div>
      <div class="header-btn">
        <div class="picture">
          <img
            class="tupian"
            src="http://liufusong.top:8080/img/profile/avatar.png"
            alt=""
          />
        </div>
        <div class="mingzi">
          <div>
            <span>游客</span>
          </div>
          <div>
            <van-button class="qulogin" type="primary" size="small" to="/login">
              &nbsp;&nbsp;去登录&nbsp;&nbsp;
            </van-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 已登录头部 -->
    <div class="header-login" v-else>
      <div class="title">
        <img src="http://liufusong.top:8080/img/avatar.png" alt="" />
      </div>
      <div class="header-btn">
        <div class="picture">
          <img
            class="tupian"
            :src="'http://liufusong.top:8080'+userInfo.avatar"
            alt=""
          />
        </div>
        <div class="mingzi">
          <div>
            <span>{{userInfo.nickname}}</span>
          </div>
          <div>
            <van-button
              @click="tishi"
              round
              class="qulogin"
              type="primary"
              size="mini"
            >
              &nbsp;&nbsp;&nbsp;退出&nbsp;&nbsp;&nbsp;
            </van-button>
          </div>
          <div class="edit">
            <span>编辑个人资料</span>
            <van-icon name="play" />
          </div>
        </div>
      </div>
    </div>

    <!-- 标签栏 -->
    <van-grid :column-num="3" :border="false">
      <van-grid-item icon="star-o" text="我的收藏" @click="shoucang"/>
      <van-grid-item icon="wap-home-o" text="我的出租" @click="chuzu"/>
      <van-grid-item icon="clock-o" text="看房记录"/>
      <van-grid-item icon="notes-o" text="成为房主"/>
      <van-grid-item icon="contact" text="个人资料"/>
      <van-grid-item icon="service-o" text="联系我们"/>

    </van-grid>

    <div class="bot-img">
      <img src="http://liufusong.top:8080/img/profile/join.png" alt="">
    </div>
  </div>
</template>

<script>

import { Dialog, Toast } from 'vant'
import { mapState } from 'vuex'
import { getUserSelfInfo } from '@/api/user.js'
export default {
  data () {
    return {
      userInfo: {}
    }
  },

  created () {
    if (this.user) {
      this.loadUserInfo()
    }
  },
  computed: {
    ...mapState(['user'])
  },

  methods: {
    async loadUserInfo () {
      try {
        const res = await getUserSelfInfo()
        // console.log(res)
        // console.log(this.user)
        this.userInfo = res.data.body
        Toast.loading({
          message: '加载中...',
          forbidClick: true

        })
        // console.log(this.userInfo)
      } catch (err) {
        Toast('获取用户信息失败')
      }
    },
    tishi () {
      Dialog.confirm({
        title: '提示',
        message: '是否确定退出'
      })
        .then(() => {
          this.$store.commit('removeUser')
          this.userInfo = null
        })
        .catch(() => {})
    },
    shoucang () {
      Toast.loading({
        message: '加载中...',
        forbidClick: true

      })
      if (this.user) {
        this.$router.push('/favorate')
      } else {
        this.$router.push('/login')
      }
    },
    chuzu () {
      Toast.loading({
        message: '加载中...',
        forbidClick: true

      })
      if (this.user) {
        this.$router.push('/rent')
      } else {
        this.$router.push('/login')
      }
    }
  }
}
</script>

<style scoped lang="less">
.myself {
  /deep/.header {
    position: relative;
    min-height: 300px;
    .header-bg {
      height: 191px;
      img {
        width: 100%;
      }
    }
    .header-btn {
      position: absolute;
      background: #fff;
      width: 85%;
      height: 165px;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      box-shadow: 0 0 10px 3px #ddd;
      margin: 50 px auto 0;
      padding: 0 20 px;
      box-sizing: border-box;
      text-align: center;
      font-size: 13px;
      .picture {
        position: relative;
        transform: translateY(-50%);
        border-radius: 50%;
        width: 70 px;
        height: 70 px;
        border: 5 px solid #f5f5f5;
        display: inline-block;
        box-shadow: 0 2px 2px #bdbdbd;
        .tupian {
          height: 60px;
          width: 60px;
          border-radius: 50%;
        }
      }
      .mingzi {
        .qulogin {
          margin-top: 10px;
          font-size: 14px;
        }
      }
    }
  }

  /deep/.header-login {
    width: 375px;
    height: 375px;
    // background-color: pink;
    position: relative;
    .title {
      img {
        width: 100%;
      }
    }
    .header-btn {
      position: absolute;
      background: #fff;
      width: 85%;
      height: 50%;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      box-shadow: 0 0 10px 3px #ddd;
      margin: 50 px auto 0;
      padding: 0 20 px;
      box-sizing: border-box;
      text-align: center;
      font-size: 13px;
      .picture {
        position: relative;
        transform: translateY(-50%);
        border-radius: 50%;
        width: 70 px;
        height: 70 px;
        border: 5 px solid #f5f5f5;
        display: inline-block;
        box-shadow: 0 2px 2px #bdbdbd;
        .tupian {
          height: 60px;
          width: 60px;
          border-radius: 50%;
        }
      }
      .mingzi {
        .qulogin {
          margin-top: 10px;
          font-size: 12px;
        }
        .edit {
          margin-top: 20px;
          color: #999;
          font-size: 12px;
        }
      }
    }
  }
}

.van-grid{
  border:none;
 /deep/.van-grid-item {
 .van-grid-item__content {
    background: none;
  }
}
}

.bot-img{
  text-align: center;
  margin-top: 10px;
  img{
    width: 92%;
  }
}

</style>
